<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //当点击提交时触发表单验证
            document.querySelector("#myform").onsubmit = function () {
                //返回值  false不提交  true提交
                //当用户名   密码  邮箱都验证通过 提交
                return checkUserName() && checkPassWord() && checkEmail();
            }

            //每个框失去光标时验证值的有效性
            var username = document.querySelector("#username");
            var password = document.querySelector("#password");
            var email = document.querySelector("#email");

            //为用户名  密码  邮箱绑定失去光标事件
            username.onblur = checkUserName;
            password.onblur = checkPassWord;
            email.onblur = checkEmail;


            //验证用户名的函数
            function checkUserName() {
                var msg = document.querySelector("#username_msg")

                //获取到用户名的值
                var usernameval = username.value.trim();
                //判断用户名是否合理
                //定义用户名需要满足的正则表达式
                var reg = /^[a-zA-Z0-9_-]{4,16}$/;//4到16位（字母，数字，下划线，减号）
                var flag = reg.test(usernameval);//通过返回true  失败返回false
                if (flag) {
                    //符合规则
                    msg.innerHTML = "检验通过";
                    msg.style.color = "green";

                } else {
                    //不合规则
                    msg.innerHTML = "用户名必须在6-12个字符";
                    msg.style.color = "red";
                }
                return flag;
            }

            //验证密码的函数
            function checkPassWord() {
                var msg = document.querySelector("#password_msg")
                var passwordval = password.value.trim();
                var reg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
                var flag = reg.test(passwordval);

                if (flag) {
                    //符合规则
                    msg.innerHTML = "检验通过";
                    msg.style.color = "green";
                } else {
                    //不符合规则
                    msg.innerHTML = "密码不符合";
                    msg.style.color = "red";
                }
                return flag;
            }

            //验证邮箱的函数
            function checkEmail() {
                var msg = document.querySelector("#email_msg");
                var emailval = email.value.trim();
                var reg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
                var flag = reg.test(emailval);
                if (flag) {
                    //成功的设置
                    msg.innerHTML = "检验通过";
                    msg.style.color = "green";
                } else {
                    msg.innerHTML = "邮箱不符合规则";
                    msg.style.color = "red";
                }
                return flag;
            }
        };
    </script>
</head>

<body>
    <!-- 定义表单 -->
    <form action="#" method="post" id="myform">
        <table>
            <tr>
                <td>
                    用户名:
                </td>
                <td>
                    <input type="text" name="username" id="username" placeholder="用户名...">
                </td>
                <td> <span id="username_msg">（*请输入您的用户名）</span></td>
            </tr>
            <tr>
                <td>
                    密码:
                </td>
                <td>
                    <input type="password" name="password" id="password" placeholder="密码...">
                </td>
                <td><span id="password_msg">（*请输入您的密码）</span></td>
            </tr>
            <tr>
                <td>
                    邮箱:
                </td>
                <td>
                    <input type="text" name="email" id="email" placeholder="邮箱...">
                </td>
                <td><span id="email_msg">（*请输入您的邮箱）</span></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
                <td><input type="reset"></td>
            </tr>
        </table>

    </form>
</body>

</html>